import 'dart:convert';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/components/main/app_bar.dart';
import 'package:flutter_eve_plugin/components/ye_xiu/login/connect_net_dialog.dart';
import 'package:flutter_eve_plugin/constants/constant.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/login/bind_result.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/login/connect_wifi.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/login/actions.dart';
import 'package:flutter_eve_plugin/plugin/main.dart';
import 'package:flutter_eve_plugin/route/main.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:qr_flutter/qr_flutter.dart';

class LoginConnectNetPage extends StatefulWidget {
  final String title;

  LoginConnectNetPage({Key key, this.title}) : super(key: key);

  @override
  _LoginConnectNetPageState createState() => _LoginConnectNetPageState();
}

class _LoginConnectNetPageState extends State<LoginConnectNetPage> {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(onInit: (store) {
      PluginEve.registerMessage(PluginConstant.httpYXBindResult, (data) {
        BindResultModel res = data;
        if (res.code == 0 || res.code == 1062) {
          bindRes(store, res);
          ///绑定成功
          Navigator.pushNamed(context, RouteConstant.LoginBindingSUCCPage);
        }
      });
    }, converter: (store) {
      return AppStateViewModel(state: store.state);
    }, builder: (context, vm) {
      String phone = vm.state.yeXiuState.loginState.phone;
      String wifiPass = vm.state.yeXiuState.loginState.wifiPass;
      String wifiName = vm.state.yeXiuState.loginState.wifiName;
      ConnectWifiInfo info = ConnectWifiInfo(phone, wifiPass, wifiName);
      return Scaffold(
        backgroundColor: Colors.white,
        appBar: buildAppBar(context,
            type: FigureIP.YE_XIU, colors: [Colors.white, Colors.white]),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(left: setRatio(30), top: setRatio(20)),
              child: Text(
                '机器扫码联网',
                style: TextStyle(
                    fontSize: setTextSp(24),
                    color: Color((0xFF333333)),
                    fontWeight: FontWeight.bold),
              ),
            ),
            Container(
              padding: EdgeInsets.only(left: setRatio(30), top: setRatio(16)),
              child: Text(
                '请将二维码对准摄像头 ',
                style: TextStyle(
                    color: Color(0xFF333333), fontSize: setTextSp(15)),
              ),
            ),
            Container(
              width: setRatio(375),
              padding: EdgeInsets.only(top: setRatio(20), bottom: setRatio(20)),
              child: Center(
                child: QrImage(
                  data: json.encode(info),
                  size: 340.0,
                ),
              ),
            ),
            Container(
              width: setRatio(375),
              child: Center(
                child: Text.rich(TextSpan(
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        showAlertDialog(context);
                      },
                    text: '机器如何扫描二维码？',
                    style: TextStyle(
                        color: Color(0xFF0387FF),
                        fontSize: setTextSp(15),
                        decoration: TextDecoration.underline,
                        decorationStyle: TextDecorationStyle.solid))),
              ),
            ),
          ],
        ),
      );
    });
  }

  void showAlertDialog(BuildContext context) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return ConnectNetDialog();
      },
    );
  }
}
